// 从node的url模块导入fileURLToPath和URL两个工具函数
// 用于将文件URL转换为系统路径（解决ES模块中路径处理问题）
import { fileURLToPath, URL } from 'node:url'

// 导入Vite的配置定义函数和Vue插件
import { defineConfig } from 'vite' // 提供类型提示的配置包装函数
import vue from '@vitejs/plugin-vue' // Vite处理Vue单文件组件的核心插件

// 加载 Element Plus 自动导入配置
import AutoImport from 'unplugin-auto-import/vite' // 自动导入API的插件
import Components from 'unplugin-vue-components/vite' // 自动导入组件的插件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // Element Plus的解析器（用于识别组件）

// 加载 Element Plus 自动导入图标集
import path from 'path' // Node.js的路径处理模块
import Icons from 'unplugin-icons/vite' // 图标自动导入插件
import IconsResolver from 'unplugin-icons/resolver' // 图标解析器

// 定义src目录的绝对路径（方便后续配置复用）
const pathSrc = path.resolve(__dirname, 'src')

// 导出Vite配置对象（通过defineConfig包装获得类型提示）
export default defineConfig({
  // 配置Vite插件
  plugins: [
    vue(), // 启用Vue插件（必选，处理.vue文件）
    // 配置自动导入（API层面，如ref、reactive等）
    AutoImport({
      imports: ['vue'], // 自动导入Vue的核心API（如ref、computed等）
      // 解析器：指定需要自动导入的库
      resolvers: [
        ElementPlusResolver(), // 自动导入Element Plus的API（如ElMessage等）
        // 配置图标组件的自动导入（前缀为Icon，如IconUser）
        IconsResolver({
          prefix: 'Icon', // 导入图标时的前缀（如<IconEpHome />）
        }),
      ],
      // 指定自动生成的类型声明文件路径（用于TypeScript类型提示）
      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
    }),

    // 配置组件自动注册（无需手动import即可使用组件）
    Components({
      resolvers: [
        // 配置图标组件自动注册（只启用Element Plus的图标集ep）
        IconsResolver({
          enabledCollections: ['ep'], // 启用Element Plus官方图标集（ep是Element Plus图标的标识）
        }),
        // 自动注册Element Plus的组件（如ElButton、ElInput等）
        ElementPlusResolver(),
      ],
      // 指定组件类型声明文件路径（用于TypeScript识别自动注册的组件）
      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),
    // 配置图标插件（自动安装所需图标集）
    Icons({
      autoInstall: true, // 当使用未安装的图标时，自动安装对应的图标包
    }),
  ],
  // 配置路径解析
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)), // 定义路径别名：将@指向src目录（如@/components等价于src/components）
    },
  },
  // 配置css预处理器
  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入 scss 变量/混合器等（注意分号分隔多个文件）
        additionalData: `@import "@/styles/variables.scss";@import "@/styles/mixins.scss";`,
      },
    },
  },
  // 配置服务器选项
  server: {
    port: 8080, // 开发服务器端口，默认 5173
    strictPort: false, // 端口被占用时是否报错（false 则自动尝试下一个端口）
    open: true, // 启动后自动打开浏览器
    cors: true, // 是否允许跨域请求
    // 代理配置
    proxy: {
      // 例如
      // '/api': {
      //   target: 'http://localhost:3000', // 后端接口基础地址
      //   changeOrigin: true, // 开启跨域
      //   rewrite: (path) => path.replace(/^\/api/, ''), // 去掉请求路径中的 /api 前缀
      //   secure: false, // 忽略 HTTPS 证书验证（后端为 HTTPS 且用自签证书时需要）
      // },
    },
  },
})
